<template>
  <div class="main-container">
    <div class="main-content">
      <el-menu
          :default-active="$route.path" router
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#67C23A"
          text-color="#000000"
          active-text-color="#ffd04b"
          >
        <el-menu-item index="/index" class="yangshi" >网站首页</el-menu-item>
        <el-menu-item index="/news" class="yangshi" >茶叶资讯</el-menu-item>
        <el-menu-item index="/index-tea" class="yangshi">茶叶商城</el-menu-item>
        <el-submenu>
          <span slot="title" class="yangshi">茶艺文化</span>
          <el-menu-item index="/tea_ceremony" class="yangshi" >茶艺知多少</el-menu-item>
          <el-menu-item index="/tea_science?labelName=998" class="yangshi" >茶学中心</el-menu-item>
          <el-menu-item index="/contact_us" class="yangshi" >联系我们</el-menu-item>
        </el-submenu>
        <el-menu-item index="/community" class="yangshi">茶社区</el-menu-item>
        <el-menu-item index="/caizhai" class="yangshi">茶园采摘</el-menu-item>
        <el-menu-item index="/me" class="yangshi" >个人中心</el-menu-item>
      </el-menu>
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "PageBody",
  data() {
    return {
      activeIndex: '1',
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key);
      console.log(keyPath);
      this.$router.push({path: key, query: {id: key, keyPath}});
    },
  }
}

</script>

<style scoped>
.el-menu--horizontal>.el-submenu .el-submenu__title {
  height: 60px;
  border-bottom: 2px solid transparent;
  color: #909399;
}
.main-container {
  margin-top: 67px;
  display: flex;
  justify-content: center;

}

.main-content {
  width: 75%;
  min-height: 90vh;
  background-color: #F1F5F8;
}
.el-menu-demo {
  max-width: 100%;
  padding: 0 50px;
}
.yangshi{
  font-size: 20px;
}

</style>